// 引入公共css
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/css/basic.css");
require("../../assets/css/property.css");
require("../../assets/fonts/word-img/iconfont");
// 引入自己的
require("./course-excise.less");
let dom = require("../../assets/js/util.js");
let axios = require("../../assets/js/axios.js");

window.addEventListener("DOMContentLoaded", function () {
	// 从本地存储中获取视频相关信息
	let fragments = JSON.parse(localStorage.getItem("fragments"));
	console.log(fragments);

	// 渲染

	//变量控制视频章节
	let n = 0;
	let video = dom.$("video");
	let process = dom.$("#process");
	//进入页面开始计时
	let startTime = Date.now();
	//持续时间
	let duration = 0;
	// 卡路里
	let kcal = 0;
	// 播放
	function play() {
		// 播放时根据章节--变量的控制，渲染数据和控制进度条(外部只执行一次)
		// 章节渲染
		dom.$("#start").textContent = n + 1;
		dom.$("#total").textContent = fragments.length;
		// 视频渲染
		video.src = axios.defaults.baseURL + fragments[n].videoUrl;
		// 标题
		dom.$("#name").textContent = fragments[n].title;
		// 蒙版
		dom.$("#img").src = axios.defaults.baseURL + fragments[n].imgUrl;
		dom.$("#courseName").textContent = fragments[n].title;
		// 播放
		video.play();
		//进度条
		timer = setInterval(function () {
			//当前时间/持续时间*100 + %----转化为100%
			process.style.width = (100 * video.currentTime) / video.duration + "%";
		}, 50);
	}
	// 执行
	play();
	// 自动播放--结束事件
	//播放结束，自动下一节
	video.addEventListener("ended", function () {
		// 变量增--换节数
		n++;
		// 结束判断
		if (n < fragments.length) {
			play();
		} else {
			// 结束后归为结束态的那一节--对应的是 n=3
			//以便在视频播放到最后一节时找不到上一节   不满足条件时的 n=4,此时不加干预的话，返回上一节 n=3，仍然是结束状态下的视频
			n = fragments.length - 1;
		}
	});
	// 上一节
	dom.$(".icon-front").addEventListener("click", function () {
		n--; //变量自减，注意不要变为负，开始位置就是0
		// 也就是小于零时归零
		if (n < 0) {
			n = 0;
		}
		// 调用播放函数--播放上一节
		play();
	});

	// 下一节
	dom.$(".icon-next").addEventListener("click", function () {
		n++; //自增
		//  n大于等于3时，即视频结束态，归为结束态
		if (n >= fragments.length) {
			n = fragments.length - 1; //归为最后一节
		}
		// 调用播放函数--播放下一节
		play();
	});

	// 暂停
	dom.$(".icon-pausen").addEventListener("click", function () {
		dom.$("#mask").style.display = "block";
		// 暂停播放
		video.pause();
		// 暂停计时
		// 暂停时当前的时间与开始时间做差
		//存在多次暂停--所以需累加
		duration += new Date() - startTime;
		console.log(duration);
	});

	// 继续
	dom.$(".icon-continue2").addEventListener("click", function () {
		dom.$("#mask").style.display = "none";
		//继续开始播放
		video.play();
		//继续开始计时
		// 重新获得开始时间
		startTime = new Date();
		console.log(startTime);
	});

	// 结束
	dom.$(".icon-over").addEventListener("click", function () {
		// 持续时间的转化
		duration = Math.floor(duration / 1000);
		// 卡路里计算,持续时间*参数
		kcal = Math.ceil(duration * 1.5);
		// 发送请求
		// 上传持续时间和卡路里
		axios
			.post("/api/exercise/save", {
				type: 2,
				duration,
				calorie: kcal,
			})
			.then((res) => {
				console.log(res);

				if (res.data.errno === 0) {
					// 提示
					alert("Have a good day!");
					//成功时跳转
					location.href = "courses.html";
				}
			});
	});
});
